<template>
  <div class="groups-page">
    <el-row :gutter="20">
      <!-- 左侧分组列表 -->
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="title">👥 会员分组</span>
              <el-button type="primary" size="small" @click="handleAddGroup">
                <el-icon><Plus /></el-icon>
              </el-button>
            </div>
          </template>

          <div class="group-list">
            <div 
              v-for="group in groupList" 
              :key="group.id"
              class="group-item"
              :class="{ active: selectedGroup === group.id }"
              @click="handleSelectGroup(group.id)"
            >
              <div class="group-info">
                <div class="group-name">
                  <el-icon><Collection /></el-icon>
                  {{ group.name }}
                </div>
                <div class="group-count">{{ group.memberCount }}人</div>
              </div>
              <div class="group-actions">
                <el-button link type="primary" size="small" @click.stop="handleEditGroup(group)">
                  编辑
                </el-button>
                <el-button link type="danger" size="small" @click.stop="handleDeleteGroup(group)">
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧分组详情 -->
      <el-col :span="16">
        <el-card v-if="currentGroup">
          <template #header>
            <div class="card-header">
              <span class="title">{{ currentGroup.name }}</span>
              <div>
                <el-button type="primary" size="small" @click="handleAddMembers">
                  <el-icon><Plus /></el-icon>
                  添加会员
                </el-button>
                <el-button type="success" size="small" @click="handleSendMessage">
                  <el-icon><Message /></el-icon>
                  群发消息
                </el-button>
              </div>
            </div>
          </template>

          <!-- 分组信息 -->
          <el-descriptions :column="2" border class="group-desc">
            <el-descriptions-item label="分组名称">{{ currentGroup.name }}</el-descriptions-item>
            <el-descriptions-item label="会员数量">{{ currentGroup.memberCount }}人</el-descriptions-item>
            <el-descriptions-item label="分组类型">{{ getGroupTypeName(currentGroup.type) }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ currentGroup.createTime }}</el-descriptions-item>
            <el-descriptions-item label="分组描述" :span="2">
              {{ currentGroup.description }}
            </el-descriptions-item>
          </el-descriptions>

          <!-- 分组条件 -->
          <div class="group-conditions" v-if="currentGroup.type === 'dynamic'">
            <h4>筛选条件</h4>
            <el-tag v-for="cond in currentGroup.conditions" :key="cond" style="margin-right: 10px;">
              {{ cond }}
            </el-tag>
          </div>

          <!-- 分组会员列表 -->
          <el-table :data="groupMembers" border style="margin-top: 20px;">
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="level" label="等级" width="120">
              <template #default="{ row }">
                <el-tag size="small">{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="points" label="积分" width="100" />
            <el-table-column prop="joinTime" label="加入时间" width="160" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button link type="danger" @click="handleRemoveMember(row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-empty v-else description="请选择一个分组" />
      </el-col>
    </el-row>

    <!-- 分组对话框 -->
    <el-dialog v-model="groupDialogVisible" :title="groupDialogTitle" width="600px">
      <el-form :model="groupForm" label-width="100px">
        <el-form-item label="分组名称">
          <el-input v-model="groupForm.name" />
        </el-form-item>
        <el-form-item label="分组类型">
          <el-radio-group v-model="groupForm.type">
            <el-radio label="static">静态分组</el-radio>
            <el-radio label="dynamic">动态分组</el-radio>
          </el-radio-group>
          <div class="form-tip">静态分组手动添加会员，动态分组根据条件自动匹配</div>
        </el-form-item>

        <template v-if="groupForm.type === 'dynamic'">
          <el-form-item label="筛选条件">
            <el-select v-model="groupForm.conditionField">
              <el-option label="会员等级" value="level" />
              <el-option label="消费金额" value="consumption" />
              <el-option label="积分范围" value="points" />
              <el-option label="注册时间" value="registerTime" />
            </el-select>
          </el-form-item>
        </template>

        <el-form-item label="分组描述">
          <el-input v-model="groupForm.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleGroupSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Collection, Message } from '@element-plus/icons-vue'

const selectedGroup = ref(1)

const groupList = ref([
  { id: 1, name: '高价值客户', type: 'dynamic', memberCount: 234, createTime: '2024-01-01', description: '累计消费超过10万的客户', conditions: ['消费 > ¥100,000'] },
  { id: 2, name: 'VIP客户', type: 'static', memberCount: 567, createTime: '2024-01-05', description: '手动筛选的VIP客户' },
  { id: 3, name: '新注册会员', type: 'dynamic', memberCount: 1234, createTime: '2024-01-10', description: '最近30天注册的新会员', conditions: ['注册时间 < 30天'] }
])

const groupMembers = ref([
  { name: '张三', phone: '13800138001', level: '钻石会员', points: 8956, joinTime: '2024-01-15 10:30' },
  { name: '李四', phone: '13800138002', level: '金卡会员', points: 5678, joinTime: '2024-01-16 14:20' }
])

const currentGroup = computed(() => {
  return groupList.value.find(g => g.id === selectedGroup.value)
})

const groupDialogVisible = ref(false)
const groupDialogTitle = ref('新增分组')

const groupForm = reactive({
  name: '',
  type: 'static',
  conditionField: '',
  description: ''
})

const applyForm = reactive({
  memberId: '',
  tagIds: []
})

const getGroupTypeName = (type) => {
  return type === 'static' ? '静态分组' : '动态分组'
}

const handleSelectGroup = (id) => {
  selectedGroup.value = id
}

const handleAddGroup = () => {
  groupDialogTitle.value = '新增分组'
  groupDialogVisible.value = true
}

const handleEditGroup = (group) => {
  groupDialogTitle.value = '编辑分组'
  Object.assign(groupForm, group)
  groupDialogVisible.value = true
}

const handleDeleteGroup = () => {
  ElMessage.success('删除成功')
}

const handleGroupSubmit = () => {
  ElMessage.success('保存成功')
  groupDialogVisible.value = false
}

const handleAddMembers = () => {
  ElMessage.info('添加会员到分组')
}

const handleSendMessage = () => {
  ElMessage.success('消息发送成功')
}

const handleRemoveMember = () => {
  ElMessage.success('会员已移除')
}
</script>

<style scoped>
.groups-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.group-list {
  max-height: 600px;
  overflow-y: auto;
}

.group-item {
  padding: 15px;
  margin-bottom: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.group-item:hover,
.group-item.active {
  background: #ecf5ff;
  border-left: 3px solid #409eff;
}

.group-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.group-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.group-count {
  color: #409eff;
  font-weight: bold;
}

.group-actions {
  display: flex;
  gap: 10px;
}

.group-desc {
  margin-bottom: 20px;
}

.group-conditions {
  margin: 20px 0;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.group-conditions h4 {
  margin: 0 0 10px 0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.current-tags {
  min-height: 40px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.tag-analysis {
  margin-top: 20px;
}

.tag-analysis h4 {
  margin: 0 0 15px 0;
}

.tag-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-count {
  min-width: 60px;
  text-align: right;
  color: #606266;
}
</style>

